<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
</head>
<style>
    ul {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    li {
        width: 300px;
        height: 60px;
        font-size: 0;
    }

    li span {
        display: inline-block;
        width: 58px;
        height: 58px;
        font-size: 16px;
        background-color: #ccc;
        border: 1px solid #000;
    }
</style>

<body>
    <!-- <ul>
        <li><span></span><span></span><span></span><span></span><span></span></li>
    </ul> -->
    <script>
        // 座位的数据（二维数组）
        var data = [
            [1, 1, 1, 1, 1],
            [1, 3, 3, 3, 1],
            [1, 3, 1, 3, 1],
            [1, 1, 2, 2, 1]
        ]
        // 要求：
        // 数字1，表示空的座位
        // 数字2，表示预定的额座位
        // 数字3，表示已售空的座位

        var str = "<ul>";
            for(var i = 0 ; i < data.length ; i ++){
                str +="<li>";
                    for(var j = 0 ; j < data[i].length ; j ++){
                        if(data[i][j] == 1){
                            str +="<span style='bavkground-color:gray;'></span>";
                        }else if(data[i][j] == 2){//表示预定座位
                        str += "<span style='background:green;'></span>";
                    }else {// 表示已售出的座位
                        str += "<span style='background:red;'></span>";
                    }
                    }
                str +="</li>";
            }
        str += "</ul>";

        document.write(str);
    </script>
</body>

</html>